<template>
  <view class="page-container">
    <!-- 顶部区域 -->
    <view class="header">
      <view class="title">高考分数线查询</view>
      <view class="search-box">
        <uni-icons type="search" size="20" class="search-icon"></uni-icons>
        <input type="text" v-model="searchText" placeholder="搜索省份" class="search-input" />
        <view class="search-dropdown" v-if="searchText && filteredProvinces.length > 0">
          <view v-for="(province, index) in filteredProvinces" :key="index" class="dropdown-item"
            @tap="handleSelectProvince(province)">
            {{ province }}
          </view>
        </view>
      </view>
    </view>
    <!-- 省份选择区 -->
    <scroll-view scroll-x class="province-scroll" show-scrollbar="false">
      <view class="province-list">
        <view v-for="(province, index) in provinces" :key="index"
          :class="['province-item', { active: currentProvince === province }]" @tap="selectProvince(province)">
          {{ province }}
        </view>
      </view>
    </scroll-view>
    <!-- 年份选择 -->
    <view class="year-selector">
      <uni-data-select v-model="selectedYear" :localdata="years" placeholder="选择年份"></uni-data-select>
    </view>
    <!-- 趋势图表 -->
    <view class="chart-container">
      <view class="chart-header">
        <view class="chart-title">分数线趋势</view>
        <!-- <view class="chart-filters">
          <uni-segmented-control :current="currentType" :values="['文科', '理科']"
            @clickItem="onTypeChange"></uni-segmented-control>
        </view> -->
      </view>
      <view class="chart-content">
        <view class="chart-legend">
          <view class="legend-item">
            <view class="legend-color" style="background: #FF6B6B;"></view>
            <text>本科一批</text>
          </view>
          <view class="legend-item">
            <view class="legend-color" style="background: #4ECDC4;"></view>
            <text>本科二批</text>
          </view>
          <view class="legend-item">
            <view class="legend-color" style="background: #45B7D1;"></view>
            <text>专科批</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 分数线数据列表 -->
    <view class="scoll-box">
      <scroll-view scroll-y class="score-list">
        <view v-if="isLoading" class="loading-container">
          <uni-icons type="spinner-cycle" size="24" class="loading-icon"></uni-icons>
          <text class="loading-text">加载中...</text>
        </view>
        <view v-for="(item, index) in scoreData" :key="index" class="score-card">
          <view class="year-title">{{ item.year }}年高考分数线</view>
          <view class="score-table">
            <view class="table-header">
              <view class="cell">批次</view>
              <view class="cell">文科</view>
              <view class="cell">理科</view>
            </view>
            <view class="table-row">
              <view class="cell">本科一批</view>
              <view class="cell">{{ item.firstBatch.liberal }}</view>
              <view class="cell">{{ item.firstBatch.science }}</view>
            </view>
            <view class="table-row">
              <view class="cell">本科二批</view>
              <view class="cell">{{ item.secondBatch.liberal }}</view>
              <view class="cell">{{ item.secondBatch.science }}</view>
            </view>
            <view class="table-row">
              <view class="cell">专科批</view>
              <view class="cell">{{ item.specialBatch.liberal }}</view>
              <view class="cell">{{ item.specialBatch.science }}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue';
const searchText = ref('');
const currentProvince = ref('北京');
const selectedYear = ref('2024');
const currentType = ref(0);
const isLoading = ref(false);
const provinces = [
  '北京', '上海', '广东', '江苏', '浙江', '山东',
  '湖北', '湖南', '河南', '河北', '四川', '重庆',
  '福建', '辽宁', '安徽', '陕西', '天津', '江西',
  '广西', '山西', '内蒙古', '吉林', '黑龙江', '贵州',
  '云南', '甘肃', '青海', '西藏', '新疆', '宁夏',
  '海南',
];
// 过滤省份列表
const filteredProvinces = ref<string[]>([]);
// 监听搜索框输入
watch(searchText, (newVal) => {
  if (newVal) {
    filteredProvinces.value = provinces.filter(province =>
      province.includes(newVal)
    );
    const exactMatch = provinces.find(province => province === newVal);
    if (exactMatch) {
      handleSelectProvince(exactMatch);
    }
  } else {
    filteredProvinces.value = [];
  }
});
// 处理省份选择
const handleSelectProvince = (province: string) => {
  currentProvince.value = province;
  searchText.value = province;
  filteredProvinces.value = [];
  updateScoreData();
};
const years = Array.from({ length: 25 }, (_, i) => {
  const year = 2024 - i;
  return { value: String(year), text: `${year}年` };
});
// 模拟不同省份和年份的数据
const generateData = () => {
  const data = {};
  provinces.forEach(province => {
    data[province] = {};
    for (let year = 2000; year <= 2024; year++) {
      const baseScore = Math.floor(Math.random() * 20) + 540; // 基础分数在540-560之间
      data[province][year] = {
        firstBatch: {
          liberal: baseScore + Math.floor(Math.random() * 10),
          science: baseScore + Math.floor(Math.random() * 20) + 10
        },
        secondBatch: {
          liberal: baseScore - Math.floor(Math.random() * 20) - 10,
          science: baseScore - Math.floor(Math.random() * 10)
        },
        specialBatch: {
          liberal: baseScore - Math.floor(Math.random() * 30) - 150,
          science: baseScore - Math.floor(Math.random() * 20) - 140
        }
      };
    }
  });
  return data;
};
const mockData = generateData();
const scoreData = ref<any[]>([]);
const updateScoreData = () => {
  isLoading.value = true;
  const province = currentProvince.value;
  const year = selectedYear.value;

  setTimeout(() => {
    if (mockData[province] && mockData[province][year]) {
      scoreData.value = [{
        year,
        ...mockData[province][year]
      }];
    } else {
      // 如果没有对应数据，显示空数据
      scoreData.value = [{
        year,
        firstBatch: { liberal: '--', science: '--' },
        secondBatch: { liberal: '--', science: '--' },
        specialBatch: { liberal: '--', science: '--' }
      }];
    }
    isLoading.value = false;
  }, 1000);
};
const selectProvince = (province: string) => {
  currentProvince.value = province;
  updateScoreData();
};
const onTypeChange = (e: { currentIndex: number }) => {
  currentType.value = e.currentIndex;
};
watch(selectedYear, () => {
  updateScoreData();
});
// 初始化数据
onMounted(() => {
  updateScoreData();
});

</script>
<style scoped>
page {
  height: 100%;
}

.page-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f5f6fa;
}

.header {
  padding: 30rpx;
  background-color: #ffffff;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20rpx;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #f5f6fa;
  border-radius: 8px;
  padding: 20rpx;
  z-index: 100;
}

.search-icon {
  margin-right: 20rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
}

.search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  max-height: 400rpx;
  overflow-y: auto;
  margin-top: 8rpx;
}

.dropdown-item {
  padding: 20rpx 30rpx;
  font-size: 28rpx;
  color: #333333;
  border-bottom: 2rpx solid #f5f6fa;
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item:active {
  background-color: #f5f6fa;
}

.province-scroll {
  background-color: #ffffff;
  padding: 20rpx 0;
  white-space: nowrap;
}

.province-list {
  display: inline-flex;
  padding: 0 30rpx;
}

.province-item {
  padding: 16rpx 40rpx;
  margin-right: 20rpx;
  font-size: 28rpx;
  color: #666666;
  background-color: #f5f6fa;
  border-radius: 30rpx;
}

.province-item.active {
  background-color: #3b5998;
  color: #ffffff;
}

.year-selector {
  padding: 30rpx;
  background-color: #ffffff;
  margin-top: 20rpx;
}

.chart-container {
  background-color: #ffffff;
  margin-top: 20rpx;
  padding: 30rpx;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.chart-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 40rpx;
  margin-top: 20rpx;
}

.legend-item {
  display: flex;
  align-items: center;
}

.legend-color {
  width: 24rpx;
  height: 24rpx;
  border-radius: 4px;
  margin-right: 10rpx;
}

.scoll-box {
  margin-top: 20rpx;
  padding: 0 20rpx;
}

.score-list {
  flex: 1;
  overflow: auto;

}

.score-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.year-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20rpx;
}

.score-table {
  border: 2rpx solid #eeeef0;
  border-radius: 8rpx;
}

.table-header {
  display: flex;
  background-color: #f5f6fa;
}

.table-row {
  display: flex;
  border-top: 2rpx solid #eeeef0;
}

.cell {
  flex: 1;
  padding: 20rpx;
  text-align: center;
  font-size: 28rpx;
  color: #333333;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
}

.loading-icon {
  animation: rotate 1s linear infinite;
}

.loading-text {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #666666;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.footer {
  display: flex;
  justify-content: space-around;
  padding: 20rpx;
  background-color: #ffffff;
  border-top: 2rpx solid #eeeef0;
}

.uni-button {
  display: flex;
  align-items: center;
  margin: 0;
}

.uni-button .uni-icons {
  margin-right: 10rpx;
}
</style>
  